<script lang="ts" setup>
import { onMounted, ref } from 'vue';

type DividerAlignContent = 'center' | 'end' | 'start';
type DividerAppearance = 'brand' | 'strong' | 'subtle';
type DividerOrientation = 'horizontal' | 'vertical';
type DividerRole = 'presentation' | 'separator';
const props = withDefaults(
  defineProps<{
    /**
     * Determines the alignment of the content within the divider. Select from start or end.
     * When not specified, the content will be aligned to the center.
     */
    alignContent?: DividerAlignContent;
    /**
     * A divider can have one of the preset appearances.
     * Select from strong, brand, subtle. When not specified, the divider has its default appearance.
     */
    appearance?: DividerAppearance;
    /**
     * Adds padding to the beginning and end of the divider.
     */
    inset?: boolean;
    /**
     * The orientation of the divider.
     * Select from horizontal or vertical. When not specified, the divider is horizontal.
     */
    orientation?: DividerOrientation;
    /**
     * The role of the element.
     * Select from separator or presentation. When not specified, the divider is a separator.
     */
    role?: DividerRole;
  }>(),
  {
    alignContent: undefined,
    appearance: undefined,
    orientation: 'horizontal',
    role: 'separator',
    inset: false,
  },
);
// Create a reference to the fluent-divider element
const dividerRef = ref<HTMLElement | null>(null);

// Update attributes when props change
onMounted(() => {
  if (!dividerRef.value) return;

  // Set attributes based on props
  if (props.alignContent) {
    dividerRef.value.setAttribute('align-content', props.alignContent);
  }

  if (props.appearance) {
    dividerRef.value.setAttribute('appearance', props.appearance);
  }

  if (props.orientation) {
    dividerRef.value.setAttribute('orientation', props.orientation);
  }

  if (props.role) {
    dividerRef.value.setAttribute('role', props.role);
  }

  if (props.inset) {
    dividerRef.value.setAttribute('inset', '');
  }
});
</script>

<template>
  <fluent-divider
    ref="dividerRef"
    :align-content="alignContent"
    :appearance="appearance"
    :orientation="orientation"
    :role="role"
    :inset="inset ? '' : undefined"
  >
    <slot></slot>
  </fluent-divider>
</template>
